<template>
  <el-container class="app-container">
    <el-aside width="200px">
      <div class="aside_A">
        <img src="../assets/image/clzd.png">
      </div>
      <el-row class="tac">
<!--          侧边栏菜单区域-->
          <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
<!--                设置图标-->
                <i class="el-icon-location"></i>
                <!-- 一级菜单-->
                <span>陶瓷库</span>
              </template>
              <!-- 二级菜单-->
              <el-menu-item index="1-1">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>陶瓷球头</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="1-2">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>陶瓷衬</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="1-3">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>配陶瓷柄</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>标准关节库</span>
              </template>
              <!-- 二级菜单-->
              <el-menu-item index="2-1">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>球头类</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="2-2">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>关节柄</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="2-3">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>金属杯</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>膝关节库</span>
              </template>
              <!-- 二级菜单-->
              <el-menu-item index="3-1">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>股骨髁</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="3-2">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>平台托</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="3-3">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>平台垫</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>定制关节库</span>
              </template>
              <!-- 二级菜单-->
              <el-menu-item index="4-1">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>无菌关节</span>
                </template>
              </el-menu-item>
              <!-- 二级菜单-->
              <el-menu-item index="4-2">
                <template slot="title">
                  <!--  设置图标-->
                  <i class="el-icon-s-data"></i>
                  <span>无菌通用髓针</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
      </el-row>
    </el-aside>
    <el-container class="main-container">
      <el-header>
        <div class="header-left-box">
          <span>库房看板系统</span>
        </div>
        <el-button type="info"  @click="logout">退出</el-button>
      </el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>
<script>
export default {
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$message.success('退出登录 成功！')
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
  .app-container{
    height: 100%;
  }
  .el-aside{
    height: 100%;
    background-color: #2F4050;
    > div{
      background-color: #3C8DBC;
      height: 60px;
      >img{
        width: 95%;
        height: 100%;
      }
    }
  }
  .main-container{
    height: 100%;
  }
  .header-left-box {
    padding-left: 20px;
    >img{
      height: auto;
      width: 190px;
    }
    >span{
      color: white;
      font-size: 12px;
    }
  }
  .el-main{
    background-color: #795da3;
  }
  .el-header{
    display: flex;
    justify-content: space-between;
    padding: 0px;
    align-items: center;
  }
  .el-header,.el-footer{
    background-color: #3C8DBC;
  }
  .el-main{
    background-color: #FFFFFF;
  }
</style>
